<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="css/purejscarousel.css"/>
<script type="text/javascript" src="js/purejscarousel.js"></script>
</head>

<body>
<ul class="carousel" id="carousel-default">
  <li id="slide">
    <div class="pic"><a href="#" target="_blank"><img src="images/pic1.png" /></a></div>
    <div class="title"><a href="#" target="_blank">
      <h2>移动电源1</h2>
      <p>高端纯棉短袖圆领T恤180克纯色全棉T恤</p>
      <span>399元</span> </a></div>
  </li>
 <li id="slide">
    <div class="pic"><a href="#" target="_blank"><img src="images/pic1.png" /></a></div>
    <div class="title"><a href="#" target="_blank">
      <h2>移动电源2</h2>
      <p>高端纯棉短袖圆领T恤180克纯色全棉T恤</p>
      <span>399元</span></a></div>
  </li>
 <li id="slide">
    <div class="pic"><a href="#" target="_blank"><img src="images/pic1.png" /></a></div>
    <div class="title"><a href="#" target="_blank">
      <h2>移动电源3</h2>
      <p>高端纯棉短袖圆领T恤180克纯色全棉T恤</p>
      <span>399元</span></a></div>
  </li>
 <li id="slide">
    <div class="pic"><a href="#" target="_blank"><img src="images/pic1.png" /></a></div>
    <div class="title"><a href="#" target="_blank">
      <h2>移动电源4</h2>
      <p>高端纯棉短袖圆领T恤180克纯色全棉T恤</p>
      <span>399元</span></a></div>
  </li>
 <li id="slide">
    <div class="pic"><a href="#" target="_blank"><img src="images/pic2.png" /></a></div>
    <div class="title"><a href="#" target="_blank">
      <h2>移动电源11</h2>
      <p>高端纯棉短袖圆领T恤180克纯色全棉T恤</p>
      <span>399元</span></a></div>
  </li>
 <li id="slide">
    <div class="pic"><a href="#" target="_blank"><img src="images/pic2.png" /></a></div>
    <div class="title"><a href="#" target="_blank">
      <h2>移动电源12</h2>
      <p>高端纯棉短袖圆领T恤180克纯色全棉T恤</p>
      <span>399元</span></a></div>
  </li>
 <li id="slide">
    <div class="pic"><a href="#" target="_blank"><img src="images/pic2.png" /></a></div>
    <div class="title"><a href="#" target="_blank">
      <h2>移动电源12</h2>
      <p>高端纯棉短袖圆领T恤180克纯色全棉T恤</p>
      <span>399元</span></a></div>
  </li>
 <li id="slide">
    <div class="pic"><a href="#" target="_blank"><img src="images/pic2.png" /></a></div>
    <div class="title"><a href="#" target="_blank">
      <h2>移动电源12</h2>
      <p>高端纯棉短袖圆领T恤180克纯色全棉T恤</p>
      <span>399元</span></a></div>
  </li>
 <li id="slide">
    <div class="pic"><a href="#" target="_blank"><img src="images/pic3.png" /></a></div>
    <div class="title"><a href="#" target="_blank">
      <h2>移动电源12</h2>
      <p>高端纯棉短袖圆领T恤180克纯色全棉T恤</p>
      <span>399元</span></a></div>
  </li>
 <li id="slide">
    <div class="pic"><a href="#" target="_blank"><img src="images/pic3.png" /></a></div>
    <div class="title"><a href="#" target="_blank">
      <h2>移动电源12</h2>
      <p>高端纯棉短袖圆领T恤180克纯色全棉T恤</p>
      <span>399元</span></a></div>
  </li>
 <li id="slide">
    <div class="pic"><a href="#" target="_blank"><img src="images/pic3.png" /></a></div>
    <div class="title"><a href="#" target="_blank">
      <h2>移动电源12</h2>
      <p>高端纯棉短袖圆领T恤180克纯色全棉T恤</p>
      <span>399元</span></a></div>
  </li>
 <li id="slide">
    <div class="pic"><a href="#" target="_blank"><img src="images/pic3.png" /></a></div>
    <div class="title"><a href="#" target="_blank">
      <h2>移动电源12</h2>
      <p>高端纯棉短袖圆领T恤180克纯色全棉T恤</p>
      <span>399元</span></a></div>
  </li>
</ul>
<script>
		var carouselDefault = new PureJSCarousel({carousel:'#carousel-default',slide:'#slide'})
</script> 
<script>
	window.onload = function () {
		var ul = document.getElementById ("carousel-default");
		var lis = ul.getElementsByTagName("li");
		lis[0].className="keynote";
		lis[1].className="keynote2";
		lis[2].className="keynote3";
		lis[3].className="keynote4";
		lis[4].className="keynote";
		lis[5].className="keynote2";
		lis[6].className="keynote3";
		lis[7].className="keynote4";
		lis[8].className="keynote";
		lis[9].className="keynote2";
		lis[10].className="keynote3";
		lis[11].className="keynote4";
	}
 </script>
</body>
</html>
